<template>
    <!-- 主体容器 -->
    <div class="result-container">
        <!-- 搜索结果 -->
        <div class="search-result">
            <div class="result-header" style="margin-bottom: 15px;">搜索到{{ articles.length }}条结果</div>
            <div v-for="(article, index) in articles" :key="index" class="result">
                <div style="display: flex; justify-content: space-between;">
                    <span class="article-title" v-html="highlightTitleText(article.title, search)"
                        @click="toBlog(index)"></span>
                    <span
                        class="article-author-time">{{ article.author }}&nbsp;&nbsp;{{ formatTime(article.date) }}&nbsp;&nbsp;
                        <el-button size="small" type="primary" @click="updateBlogPass(article,index)">
                                    通过
                                </el-button>&nbsp;&nbsp;
                        <el-popconfirm title="确认要驳回博文?" cancel-button-text="取消" confirm-button-text="确认"
                            @confirm="updateBlogUnpass(article,index)"><template #reference>
                                <el-button size="small" type="danger">
                                    驳回
                                </el-button>
                            </template></el-popconfirm></span>
                </div>
                <div @click="toBlog(index)">
                    <span class="article-content">
                        <el-text line-clamp="2" v-html="highlightContentText(article.content, search)"></el-text>
                    </span>
                </div>
                <el-divider style="margin: 15px 0% 15px 0%; width: 100%;" />
            </div>
        </div>
    </div>
    <div>

    </div>
</template>

<script lang="ts" setup>
    import {
        getBlogByTitle,
        getUserById,
        getBlogByContent,
        listBlogById,
        deleteBlog,
    getBlogByStatus,
        updateBlog,
    } from '@/api'
    import {
        Search
    } from '@element-plus/icons-vue'
    import {
        all
    } from 'axios';
    import {
        ElMessage
    } from 'element-plus';
    import {
        ref,
    } from 'vue';

    const search_input = ref('');
    const author_input = ref('');
    const id_input = ref('');
    const radio_type = ref('1');
    const search = getUrlParam('word');
    const tempArticles = ref([]);
    const articles = ref([]);

    function getUrlParam(key: string) {

        // 获取地址栏上"?"问号及后面的参数
        let search = window.location.search.substring(1);
        console.log('search：', search);

        // 将url参数转为url对象
        let urlsp = new URLSearchParams(search);
        console.log('URLSearchParams', urlsp);

        // 根所传入的key返回对应的参数值
        return urlsp.get(key);
    }

    search_input.value = getUrlParam('word');
    const formatTime = (timestamp: number) => {
        const date = new Date(timestamp);
        return date.toLocaleString();
    }

    const toBlog = (index: number) => {
        window.location.href = "http://localhost:8080/adminSeeBlog?id=" + articles.value[index].id;
    }


    const searchAll = () => {
        articles.value = [];
        getBlogByStatus(1).then(
            res => {
                if (res.data != null)
                    for (let i = 0; i < res.data.length; i++) {
                        articles.value.push(res.data[i]);
                        getUserById(articles.value[i].bloggerId).then(
                            res => {
                                articles.value[i].author = res.data.nickname;
                            }
                        )
                    }
            }
        )
    }

    searchAll();

    const escapeRegExp = (string: string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

    const highlightTitleText = (text: string, keyword: string) => {
        if (!keyword) return text;
        const regex = new RegExp(escapeRegExp(keyword), 'gi');
        const highlighted = text.replace(regex, (match) => `<span style="color:red;">${match}</span>`);
        console.log(highlighted);
        return highlighted;
    }

    const highlightContentText = (text: string, keyword: string) => {
        if (!keyword) return text;
        const regex = new RegExp(escapeRegExp(keyword), 'gi');
        console.log(keyword);
        const highlighted = text.replace(regex, (match) => `<el-text style="color:red;">${match}</el-text>`);
        console.log(highlighted);
        return highlighted;
    }

const updateBlogUnpass = (article: any,index: any) => {
    let data = {
        id: article.id,
        status: 3,
        title: article.title,
        content:article.content,
    }
    updateBlog(data).then(
        res => {
            if (res.code == 200) {
                ElMessage({ message: "驳回成功", type: "success" });
                articles.value.splice(index, 1)
            } 
    }
)
}
const updateBlogPass = (article: any,index: any) => {
    let data = {
        id: article.id,
        status: 2,
        title: article.title,
        content:article.content,
    }
    updateBlog(data).then(
        res => {
            if (res.code == 200) {
                ElMessage({ message: "通过成功", type: "success" });
                articles.value.splice(index, 1)
            } 
    }
)
}

</script>

<style scoped>
    .search-input-container {
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .search-input {
        width: 80%;
        margin-left: 15px;
        height: 40px;
    }

    .result-container {
        display: flex;
        width: 100%;
        height: 709px;
    }

    .search-result {
        width: 100%;
        height: 100%;
        /* display: flex; */
    }

    .result-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        width: 50%;
        margin-left: 20%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .result {
        width: 70%;
        margin-left: 20%;
    }

    .article-title {
        font-size: larger;
        font-weight: 600;
    }

    .article-author {
        font-size: medium;
        font-weight: 500;
    }

    .filter-container {
        width: 20%;
        height: 100%;
        margin-left: 5px;
        box-shadow: 0 0 1px 0 #000;
    }

    .filter-title {
        margin: 5%;

    }

    .highlight {
        color: red !important;
        font-size: larger;
        font-weight: 600;
    }
</style>